<template>
  <div class='permssion-container'>
    <div class="app-container">

      <!-- tables 表格区域 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <el-button type="primary" @click="addPermission">添加权限</el-button>
          </div>
        </template>
        <el-table style="width: 100%; margin-bottom: 20px" default-expand-all :data="permissionList">
          <el-table-column label="菜单名称" prop="name" />
          <el-table-column label="权限标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button  type="primary"  v-if="row.type === 1">添加权限点</el-button>
              <el-button  type="success" @click="editPermission(row.id)">编辑</el-button>
              <el-button  type="danger" @click="deletePermission(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- dialog 弹框 -->
      <el-dialog  width="30%" :title="title" v-model="isVisible" :close-on-click-modal="false" @close="closeDialog">
        <el-form ref="formRef" :model="formData" :rules="rules">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description"></el-input>
          </el-form-item>
          <el-form-item label="权限开启" prop="enVisible">
            <el-switch v-model="formData.enVisible">
            </el-switch>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="submitForm">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {getPermissionListApi,getPermissionDetailApi,  deletePermissionApi, addPermissionApi, updatePermissionApi} from '@/api/permission'
import type { PermissionRes, EditPermission } from '@/types/permission'
import { transListToTreeData } from '@/utils/index'
// @ts-ignore
import { ElMessageBox, ElMessage } from 'element-plus'
import type {FormInstance} from 'element-plus'



// 定义权限列表返回的数据
const permissionList = ref<PermissionRes[]>([])

// 获取权限列表
const getPermissionList = async () => {
  const res = await getPermissionListApi()
  permissionList.value = transListToTreeData<PermissionItem>(res.data, '0')
}


// 删除权限
const deletePermission = async(id: string) => {
  // 提示用户是否删除
  await ElMessageBox.confirm('是否删除该权限', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  // 调用删除接口
  await deletePermissionApi(id)
  // 提示删除成功
  ElMessage.success('删除成功')
  // 刷新列表
  getPermissionList()
}

// 新增权限
const addPermission = () => {
  title.value = '添加权限'
  openDialog('')
}

// 编辑权限
const editPermission = (id: string) => {
  title.value = '编辑权限'
  openDialog(id)
}

// dialog 弹框模块
const isVisible = ref(false)
const title = ref('添加权限')

// 打开弹框
const openDialog =async (id: string) => {
  isVisible.value = true
  // 编辑时 表单数据回显
  if (title.value === '编辑权限') {
    // 获取权限详情
    const res = await getPermissionDetailApi(id)
    // 赋值
    formData.value = res.data
  }
}
// 关闭弹框
const closeDialog = () => {
  isVisible.value = false
  // 重置表单
  formRef.value?.resetFields()
  // 清空部门详情
  formData.value = {
    _id: '',
    name: '',
    code: '',
    description: '',
    type: '',
    pid: '',
    enVisible: '0',
    __v: '',
    id: ''
  }
}

// 表单模块
const formRef = ref<FormInstance>()
const formData = ref<EditPermission>({
  _id: '',
  name:'', 
  code: '',
  description: '',
  type: '',
  pid: '',
  enVisible: '0',
  __v: '',
  id: ''
})

// 表单校验
const rules = ref({
  name: [
    { required: true, message: '请输入权限名称', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入权限标识', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入权限描述', trigger: 'blur' }
  ]
})

// 提交表单
const submitForm = async() =>{
  // 表单校验
  await formRef.value?.validate()
  // 判断是新增还是编辑
  if (title.value === '添加权限') {
    // 添加
    // 发送请求
    await addPermissionApi(formData.value)
    // 提示用户
    ElMessage.success('添加成功')
  } else {
    // 编辑
    // 发送请求
    await updatePermissionApi(formData.value)
    // 提示用户
    ElMessage.success('更新成功')
  }
  // 关闭弹层
  closeDialog()
  // 刷新列表
  getPermissionList()
}

onMounted(() => {
  getPermissionList()
})


</script>


<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: flex-end;
}
</style>